<template>
	<view class="dialog-pop">
		<view class="dialog-title">{{dialogTitle}}</view>
		<view class="dialog-cont">{{dialogCont}}</view>
		<view class="dialog-btn">
			<view class="cancel" @click="cancel">{{cancelBtnName}}</view>
			<view class="confirm" @click="confirm">{{confrimBtnName}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'dialog',
		props: {
			dialogTitle: {
				type: String,
				default: '温馨提示'
			},
			dialogCont: {
				type: String,
				default: ''
			},
			cancelBtnName: {
				type: String,
				default: '取消'
			},
			confrimBtnName: {
				type: String,
				default: '确定'
			}
		},
		data(){
			return {
				
			}
		},
		methods: {
			cancel(){
				this.$emit('cancel')
			},
			confirm(){
				this.$emit('confirm')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dialog-pop{
		background-color: #fff;
		border-radius: 20rpx;
		width: 600rpx;
		padding: 50rpx;
		.dialog-title{
			font-weight: 800;
			text-align: center;
		}
		.dialog-cont{
			text-align: center;
			margin: 50rpx 0;
		}
		.dialog-btn{
			display: flex;
			align-items: center;
			gap: 30rpx;
			view{
				color: #fff;
				border-radius: 8rpx;
				flex: 1;
				height: 50rpx;
				line-height: 50rpx;
				background-color: red;
				text-align: center;
			}
		}
	}
</style>